<template>
	<view class="container">
		<view class="head">
			<view class="info">配送信息</view>
		</view>
		<view class="card-box">
			<view class="item display-flex arrow" @click="onDate">
				<view class="label">配送日期</view>
				<view class="value">{{date&&date.length>0?date[0]:'请选择'}}</view>
			</view>
			<view class="item display-flex arrow" @click="onTime">
				<view class="label">配送时间</view>
				<view class="value">{{time?time.label:'请选择'}}</view>
			</view>
			<!-- <view class="item display-flex">
				<view class="label">配送地点</view>
				<view class="value one-ellipsis">{{userInfo.addressDesc}}</view>
			</view>
			<view class="item display-flex">
				<view class="label">联系电话</view>
				<view class="value">{{userInfo.phone}}</view>
			</view> -->
		</view>
		<view class="head">
			<view class="info">产品信息</view>
		</view>
		<view class="card-box">
			<view class="item display-flex arrow" @click="onProd">
				<view class="label">配送产品</view>
				<view class="value">{{prodStr?prodStr:'请选择'}}</view>
			</view>
			<view class="item display-flex" v-if="balanceNum">
				<view class="label">单次消耗积分</view>
				<view class="value">{{balanceNum?balanceNum+'积分':'请选择'}}</view>
			</view>
			<view class="item display-flex" v-if="balancePrice">
				<view class="label">单次消耗金额</view>
				<view class="value">{{balancePrice?balancePrice+'元':'请选择'}}</view>
			</view>

		</view>

		<view class="logout" :class="time?'active':''" @click="onSubmit()">立即配送</view>
		<uni-popup ref="popup" type="bottom">
			<view class="popupView">
				<view class="title">
					选择配送时间
					<image src="/static/icon_close.png" @click="closePopup" />
				</view>
				<view class="list">
					<view class="item" :class="item.id == selected.id && 'active'" v-for="(item, index) in timeList"
						@click="clickListItem(item)" :key="index">{{item.label}}
						<image class="icon-yes" src="/static/icon_yes.png" v-if="item.id == selected.id" />
					</view>
				</view>
				<view class="popup_btn" @click="confirmPopup">确认</view>
			</view>
		</uni-popup>
		<uni-popup ref="popupProd" type="bottom">
			<view class="popupView">
				<view class="title">
					选择配送产品
					<image src="/static/icon_close.png" @click="closePopup" />
				</view>
				<view class="list">
					<view class="item display-flex" v-for="(item, index) in dataList" :key="index">
						<!-- <view class="name">
							{{item.name}} ({{item.consume}}积分)
						</view> -->

						<view class="name" v-if="item.consumeType==='B'">{{item.name}}
							({{parseFloat(item.consume/100).toFixed(2)}}元)</view>
						<view class="name" v-else>{{item.name}} ({{item.consume}}积分)</view>

						<view class="num-box display-flex">
							<view class="del btn" :class="item.count<1?'active':''" @click="clickListItemProd(item,0)">-
							</view>
							<view class="num">{{selectedProd[item.id]?selectedProd[item.id].count:0}}</view>
							<view class="add btn" :class="!item.count||(item.count>-1&&item.count<100)?'active':''"
								@click="clickListItemProd(item,1)">+</view>
						</view>
						<!-- <image class="icon-yes" src="/static/icon_yes.png" v-if="selectedProd[item.id]" /> -->
					</view>
				</view>
				<view class="popup_btn" @click="confirmProdPopup">确认</view>
			</view>
		</uni-popup>
		<up-calendar :show="showCalendar" mode="single" :minDate="minDate" :defaultDate="defaultDate"
			@confirm="change"></up-calendar>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import dayjs from 'dayjs';
	const userInfo = ref(getApp().globalData.userInfo)
	const cardInfo = ref({});
	const date = ref([])
	const time = ref('')
	const showCalendar = ref(false)
	const minDate = dayjs().add(1, 'day').format('YYYY-MM-DD')
	const defaultDate = dayjs().add(1, 'day').format('YYYY-MM-DD')
	// const minDate = ref('2024-12-01')

	// 时间列表
	const timeList = ref([])
	const dataList = ref([])
	const prodChecked = ref({})
	const prodStr = ref('')
	const prodId = ref([])
	// 选择配送时间弹框-dom对象
	const popup = ref()
	// 选择配送时间弹框-选中
	const selected = ref({})

	// 选择产品弹框-dom对象
	const popupProd = ref()
	// 选择产品弹框-选中
	const selectedProd = ref({})
	const balanceNum = ref(0)
	const balancePrice = ref(0)

	const getTimeList = (code) => {
		getApp().globalData.serviceApi({
			"dictType": "time",
		}, 'getDictData', 'POST').then(res => {
			timeList.value = res.data
		})
	}
	const getDataTest = () => {
		dataList.value = [{
			"id": "产品编号",
			"name": "产品名称",
			"consume": "120"
		}, {
			"id": "产品编号",
			"name": "产品名称",
			"consume": "30"
		}, {
			"id": "产品编号",
			"name": "产品名称",
			"consume": "产品消耗积分"
		}]
	}
	const getData = () => {
		getApp().globalData.serviceApi('', 'getProductList', '').then(res => {
			dataList.value = res.data
		}).catch(error => {
			dataList.value = []
		})
	}

	const onDate = () => {
		showCalendar.value = true
	}
	const change = (e) => {
		console.log(e);
		date.value = e
		showCalendar.value = false
	}
	// 选择配送时间-打开弹框
	const onTime = () => {
		popup.value.open()
	}
	// 选择配送时间-选择数据
	const clickListItem = (item) => {
		selected.value = item
	}
	// 选择配送时间-确定
	const confirmPopup = () => {
		console.log(selected.value)
		time.value = selected.value
		popup.value.close()
	}
	// 关闭所有弹框
	const closePopup = () => {
		popup.value.close()
		popupProd.value.close()
		showCalendar.value = false
	}
	// 选择产品-打开弹框
	const onProd = () => {
		popupProd.value.open()
	}
	// 选择产品-选择数据
	const clickListItemProd = (item, type) => {
		if (type === 1) {
			if (!selectedProd.value[item.id]) {
				selectedProd.value[item.id] = item
				selectedProd.value[item.id].count = 1
			} else if (selectedProd.value[item.id].count < 99) {
				selectedProd.value[item.id].count++;
			}
		} else {
			if (selectedProd.value[item.id]) {
				if (selectedProd.value[item.id].count > 1) {
					selectedProd.value[item.id].count--;
				} else if (selectedProd.value[item.id].count > 0) {
					delete selectedProd.value[item.id];
				}
			}
		}
	}
	// 选择产品-确定
	const confirmProdPopup = () => {
		console.log(selectedProd.value)
		prodChecked.value = JSON.parse(JSON.stringify(selectedProd.value))
		const arrName = []
		const arrId = []
		let balance = 0
		let balance1 = 0
		for (let key in prodChecked.value) {
			console.log('!!!!!', key)
			const item = prodChecked.value[key]
			arrName.push(item.name + "*" + item.count)
			arrId.push({
				id: item.id,
				name: item.name,
				consume: parseFloat(item.consume) * item.count,
				count: item.count,
				consumeType: item.consumeType
			})
			if (item.consumeType === 'B') {
				balance1 = balance1 + (parseFloat(item.consume) * item.count)
			} else {
				balance = balance + (parseFloat(item.consume) * item.count)
			}
		}
		prodId.value = arrId
		prodStr.value = arrName.join(',')
		balanceNum.value = balance
		balancePrice.value = parseFloat(balance1 / 100).toFixed(2)
		popupProd.value.close()
	}

	const onSubmit = () => {
		if (!time.value) {
			uni.showToast({
				title: '请选择配送时间',
				icon: 'none'
			})
			return
		}
		uni.showLoading({
			title: '预约中...',
			mask: true
		})

		getApp().globalData.serviceApi({
			"time": time.value.value,
			"date": date.value[0],
			"planDescDtoList": prodId.value
		}, 'designate', '').then(res => {
			uni.hideLoading()
			if (res.code !== 0) {
				uni.showToast({
					title: res.message ? res.message : '预约失败，请稍后重试',
					icon: 'none'
				})
				return
			}
			// return
			uni.navigateTo({
				url: '/pages_other/send/result'
			});
		}).catch(error => {
			uni.hideLoading()
			dataList.value = []
			uni.showToast({
				title: error.message ? error.message : '预约失败，请稍后重试',
				icon: 'none'
			})
		})

	};

	onLoad((option) => {
		console.log('8888', dayjs().add(1, 'day').format('YYYY-MM-DD'))
		getTimeList()
		getData()
	});
</script>

<style lang="less" scoped>
	.container {
		width: 100%;
		min-height: 100%;
		background-color: #f1f1f1;
		padding: 0 30rpx;

		.head {
			padding: 24rpx 0rpx 0rpx;
			// background: #2977ff;

			.info {
				font-size: 28rpx;
				color: #333;
			}
		}

		.card-box {
			padding: 0 48rpx;
			background-color: #fff;
			padding-bottom: 10rpx;
			border-radius: 16rpx;
			margin-top: 20rpx;
			padding: 10rpx 25rpx 0;
			margin-bottom: 20rpx;

			.item {
				font-size: 28rpx;
				padding: 26rpx 0;
				border-bottom: 1rpx solid #edeff0;
				position: relative;

				.label {
					color: #999;
				}

				.value {
					width: calc(100% - 190rpx);
					text-align: right;
				}

				&.arrow {
					padding-right: 34rpx;

					&::after {
						content: '';
						width: 28rpx;
						height: 28rpx;
						background-image: url('/static/icon_arrow_right.png');
						background-size: 100% 100%;
						background-repeat: no-repeat;
						position: absolute;
						top: 50%;
						right: 0;
						margin-top: -13rpx;
					}
				}


				&:last-child {
					border: none;
				}
			}
		}

		.logout {
			height: 80rpx;
			line-height: 80rpx;
			color: #fff;
			font-size: 34rpx;
			position: fixed;
			bottom: 80rpx;
			width: calc(100% - 60rpx);
			text-align: center;
			left: 30rpx;
			background: #2977ff;
			border-radius: 80rpx;
			opacity: 0.6;

			&.active {
				opacity: 1;
			}
		}
	}

	::v-deep .uni-modal {
		border-radius: 16rpx;
	}

	.popupView {
		background-color: #ffffff;
		padding: 0 48rpx;
		border-radius: 16rpx 16rpx 0 0;
		display: flex;
		flex-direction: column;
		padding-bottom: 50rpx;

		.title {
			position: relative;
			// height: 50rpx;
			line-height: 120rpx;
			text-align: center;
			color: #2F3338;
			font-size: 32rpx;
			font-weight: bold;

			&>image {
				position: absolute;
				top: 44rpx;
				right: 0;
				width: 32rpx;
				height: 32rpx;
			}
		}

		.list {
			max-height: 600rpx;
			overflow: auto;
			margin-bottom: 40rpx;

			.item {
				position: relative;
				height: 100rpx;
				line-height: 100rpx;
				color: #2F3338;
				font-size: 32rpx;

				.icon-yes {
					position: absolute;
					right: 0;
					top: 50%;
					transform: translateY(-50%);
					width: 48rpx;
					height: 48rpx;
				}

				.num-box {
					height: 60rpx;
					line-height: 60rpx;
					border-radius: 6rpx;
					overflow: hidden;

					.btn {
						width: 60rpx;
						text-align: center;
						font-size: 40rpx;
						background-color: #edeff0;
						color: #999;

						&.active {
							background-color: #175DFF;
							color: #fff;
						}
					}

					.num {
						width: 100rpx;
						text-align: center;
					}
				}
			}
		}

		.popup_btn {
			width: 100%;
			height: 88rpx;
			background: linear-gradient(90deg, #175DFF 0%, #2977FF 100%);
			box-shadow: 0rpx 10rpx 30rpx 0rpx rgba(23, 93, 255, 0.3);
			border-radius: 8rpx;
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
</style>